<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>tableToGrid</title>
<link type="text/css" rel="stylesheet" rev="stylesheet" href="style/style.css" media="all"></link>
<link type="text/css" rel="stylesheet" rev="stylesheet" href="style/SyntaxHighlighter.css" media="all"></link>
<link type="text/css" rel="stylesheet" rev="stylesheet" href="style/grid.debug.css" media="all"></link>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/jquery.extgrid.js"></script>
<script type="text/javascript" src="js/SyntaxHighlighter.js"></script>
</head>
<body>
<div id="content">
	<h2>表格转换</h2>
	<div class="delta">
		<strong>如果需要转换带有列合并的 请添加headerTpl参数</strong><br>
	</div>
	<div id="demo" style="margin-top:5px;">
		<table class="to_grid" title="表格转换" data-options="rowNumbersWidth:'24px',pagination:true,pageSize:1,pageList:[1,2,3,4,5]" style="height:200px; width:600px;">
			<thead>
				<tr>
					<th field="id" style="width:80px;" data-options="sortable:true">ID</th>
					<th field="title" data-options="width:100">标题</th>
					<th field="content"  data-options="width:200">内容</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td><td>标题11111111111</td><td>内容1111111111</td><td field="_expand">我是扩展行</td>
				</tr>
				<tr>
					<td field="content">内容2222222222222</td><td field="id">2</td><td field="title">标题22222222222</td>
				</tr>
				<tr>
					<td>3</td><td>标题3333333333333</td><td>内容333333333333</td>
				</tr>
				<tr>
					<td>4</td><td>标题44444444444444</td><td>内容4444444444444</td>
				</tr>
			</tbody>
		</table>
		<table class="to_grid" title="表格转换" data-options="rowNumbersWidth:'24px',checkBox:true" style="height:200px; width:400px;">
			<thead>
				<tr>
					<th field="gid" style="width:80px;" data-options="sortable:true" ignore >gid(被忽略)</th>
					<th field="id" style="width:80px;" data-options="sortable:true">ID</th>
					<th field="title" data-options="width:100">标题</th>
					<th field="content"  data-options="width:200">内容</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td><td>标题11111111111</td><td>内容1111111111</td><td field="_expand">我是扩展行</td>
				</tr>
				<tr>
					<td>2</td><td>标题22222222222</td><td>内容2222222222222</td>
				</tr>
				<tr>
					<td>3</td><td>标题3333333333333</td><td>内容333333333333</td>
				</tr>
				<tr>
					<td>4</td><td>标题44444444444444</td><td>内容4444444444444</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="delta dotte">
		<strong>HTML</strong>
		<textarea name="code" class="html">
<table class="to_grid" title="表格转换" data-options="rowNumbersWidth:'24px',pagination:true,pageSize:1,pageList:[1,2,3,4,5]" style="height:200px; width:600px;">
	<thead>
		<tr>
			<th field="id" style="width:80px;" data-options="sortable:true">ID</th>
			<th field="title" data-options="width:100">标题</th>
			<th field="content"  data-options="width:200">内容</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td><td>标题11111111111</td><td>内容1111111111</td><td field="_expand">我是扩展行</td>
		</tr>
		<tr>
			<td field="content">内容2222222222222</td><td field="id">2</td><td field="title">标题22222222222</td>
		</tr>
		<tr>
			<td>3</td><td>标题3333333333333</td><td>内容333333333333</td>
		</tr>
		<tr>
			<td>4</td><td>标题44444444444444</td><td>内容4444444444444</td>
		</tr>
	</tbody>
</table>
<table class="to_grid" title="表格转换" data-options="rowNumbersWidth:'24px',checkBox:true" style="height:200px; width:400px;">
	<thead>
		<tr>
			<th field="gid" style="width:80px;" data-options="sortable:true" ignore >gid(被忽略)</th>
			<th field="id" style="width:80px;" data-options="sortable:true">ID</th>
			<th field="title" data-options="width:100">标题</th>
			<th field="content"  data-options="width:200">内容</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td><td>标题11111111111</td><td>内容1111111111</td><td field="_expand">我是扩展行</td>
		</tr>
		<tr>
			<td>2</td><td>标题22222222222</td><td>内容2222222222222</td>
		</tr>
		<tr>
			<td>3</td><td>标题3333333333333</td><td>内容333333333333</td>
		</tr>
		<tr>
			<td>4</td><td>标题44444444444444</td><td>内容4444444444444</td>
		</tr>
	</tbody>
</table>
		</textarea>
		<strong>Script</strong>
		<pre name="code" class="javascript">
$(".to_grid").togrid();//$(".to_grid").togrid( {...configs...} );
		</pre>
	</div>
</div>
<script type="text/javascript">
function toGrid(){
	$(".to_grid","#demo").togrid();
}
$(window).ready(function(){
	dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
	dp.SyntaxHighlighter.HighlightAll('code');
	
	toGrid();
});
</script>
</body>
</html>